<template>
	<a-card shadow="none" title="设备分布">
		<div style="height: 600px;width: 100%;" id="mapbox"></div>
		<div class="selectbox">
			<div class="item">
				<ScanOutlined style="font-size: 38px;color: #11EEE1;" />
				<div style="display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-left: 10px;">
					<span style="color: #fff;font-size: 30px;font-weight: 600;">4</span>
					<span style="color: #11EEE1;font-size: 16px;">在线设备</span>
				</div>
			</div>
			<div class="item">
				<MinusSquareOutlined style="font-size: 38px;color: #E64A19;" />
				<div style="display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					margin-left: 10px;">
					<span style="color: #fff;font-size: 30px;font-weight: 600;">3</span>
					<span style="color: #E64A19;font-size: 16px;">离线设备</span>
				</div>
			</div>
		</div>
		<div class="searchbox">
			<a-input v-model:value="searchValue" placeholder="请输入设备" />
		</div>
	</a-card>
</template>
<script setup>
	import {
		ref,
		onMounted,
	} from 'vue'
	const searchValue = ref('')
	// 创建标记并应用自定义图标
	const addressInfo = [{
			lng: 116.3979471,
			lat: 39.9081726,
			device: "北京客户.工程1.现场1.设备1",
			tem: 23.3,
			hum: 30.3,
			com: 'off',
			state: 'online'
		},
		{
			lng: 117.0056,
			lat: 36.6670723,
			device: "济南客户.工程1.现场1.设备1",
			tem: 28.5,
			hum: 30.5,
			com: 'on',
			state: 'online'
		},
		{
			lng: 117.2523808,
			lat: 39.1038561,
			device: "天津客户.工程1.现场1.设备1",
			tem: 28.1,
			hum: 26.5,
			com: 'off',
			state: 'offline'
		},
		{
			lng: 108.88759,
			lat: 34.223564,
			device: "西安客户.工程1.B座.设备1",
			tem: 32.7,
			hum: 18.5,
			com: 'off',
			state: 'online'
		},
		{
			lng: 108.887118,
			lat: 34.223545,
			device: "西安客户.工程2.A座.设备1",
			tem: 32,
			hum: 18,
			com: 'on',
			state: 'online'
		},
		{
			lng: 108.887514,
			lat: 34.223354,
			device: "西安客户.工程2.C座.设备2",
			tem: 32,
			hum: 28.5,
			com: 'on',
			state: 'offline'
		},
		{
			lng: 114.4897766,
			lat: 38.0451279,
			device: "河北客户.工程1.现场1.设备1",
			tem: 36.9,
			hum: 40.15,
			com: 'off',
			state: 'offline'
		},
	]
	onMounted(async () => {
		/*-------------------------------------------------------------天地图---经纬度有误差---------------------------*/
		L.CRS.CustomEPSG4326 = L.extend({}, L.CRS.Earth, {
			code: 'EPSG:4326',
			projection: L.Projection.LonLat,
			transformation: new L.Transformation(1 / 180, 1, -1 / 180, 0.5),
			scale: function(zoom) {
				return 256 * Math.pow(2, zoom - 1);
			}
		});
		const map = L.map("mapbox", {
			center: [34.223189, 108.88750000000005],
			zoom: 18,
			maxZoom: 20,
			minZoom: 1,
			attributionControl: false,
			z0omcentrel: true,
			dragging: true,
			closePopupOnClick: false,
		});
		var baseLayers = {
			"高德影像": L.layerGroup(
				[
					L.tileLayer( //底图
						'http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
							subdomains: "1234",
							maxNativeZoom: 18,
							maxZoom: 100,
						}),
				]).addTo(map),
			"高德底图": L.tileLayer(
				'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
					subdomains: "1234",
					maxNativeZoom: 18,
					maxZoom: 100,
				}),
			"天地图": L.layerGroup(
				[
					L.tileLayer( //底图
						'http://t{s}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=eb254cf5e72992be8b22f9adb1f79093', {
							subdomains: [1, 2, 3, 4, 5, 6, 7],
							maxNativeZoom: 18,
							maxZoom: 100,
						}),
					L.tileLayer( //标记
						'http://t{s}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=eb254cf5e72992be8b22f9adb1f79093', {
							subdomains: [1, 2, 3, 4, 5, 6, 7],
							maxNativeZoom: 18,
							maxZoom: 100,
						})
				]),
			"mapbox": L.tileLayer(
				'https://api.mapbox.com/styles/v1/mapbox/streets-v11/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibHVja2RvZyIsImEiOiJjbGdrNXZmNWkxY2NqM3BteWltcjYwaGl4In0.Xm_EO9lIxHAiCcpJx6FT1A', {
					subdomains: [1, 2, 3, 4, 5, 6, 7],
					maxNativeZoom: 18,
					maxZoom: 100,
				})
		}
		L.control.layers(baseLayers, {}).addTo(map);
		/*-------------------------------------------------------------标记------------------------------*/
		var svgIconUrl =
			''
		var testiconUrl =
			''
		// 创建一个 L.Icon 实例，使用 SVG 图片作为图标
		var myIcon1 = L.icon({
			iconUrl: svgIconUrl,
			iconSize: [60, 60], // 例如，SVG 图标宽度为 38px，高度为 95px
			iconAnchor: [22, 94], // 例如，定位点在 SVG 图标的中心
			popupAnchor: [-3, -76] // 可选：设置弹出窗口时图标的定位点
		});
		var myIcon2 = L.icon({
			iconUrl: testiconUrl,
			iconSize: [60, 60],
			iconAnchor: [22, 94],
			popupAnchor: [-3, -76]
		});
		// 循环 addressInfo 数组创建标记
		addressInfo.forEach(function(info) {
			let html = `
		    <p style="font-weight: 600;color:#000">${info.device}</p>
			<p>
			  <span style='color:#000'>风机:</span>
			  <span style='color:#06c'>${info.com}</span>
			</p>
		    <p>
		      <span style='color:#000'>温度:</span>
		      <span style='color:#06c'>${info.tem}</span> ℃
		    </p>
			<p>
			  <span style='color:#000'>湿度:</span>
			  <span style='color:#06c'>${info.hum}</span> ℃
			</p>
			 <span class="clickable-paragraph" style="border-bottom: 1px solid #06c;color:#06c;cursor: pointer;">查看详情</span>
			`
			// 为每个地点创建一个标记
			var marker = L.marker([info.lat, info.lng], {
				icon: info.state === 'online' ? myIcon1 : myIcon2
			}).bindPopup(html, {
				className: 'my-popup-class'
			}).on('popupopen', function(e) {
				var popup = e.popup;
				// 监听弹窗内的特定段落的点击事件
				popup.getElement().querySelector('.clickable-paragraph')
					.addEventListener(
						'click',
						function() {
							console.log('执行你想要进行的操作---点击弹框详情', info);
							map.flyTo([info.lat, info.lng], 6, {
								animate: true, // 确保动画效果开启
								duration: 2.0, // 动画持续时间，单位秒
							});
						});
			});
			marker.on('click', function() {
				map.flyTo([info.lat, info.lng], 18, {
					animate: true, // 确保动画效果开启
					duration: 3.0, // 动画持续时间，单位秒
				});
			});
			map.addLayer(marker);
		});
	});
</script>
<style scoped>
	.searchbox {
		width: 305px;
		position: absolute;
		top: 230px;
		left: 222px;
		transform: translate(-50%, -50%);
		z-index: 999;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: rgba(0, 0, 0, .5);
		margin: 8px;
		padding: 8px 16px;
		box-sizing: border-box;
	}

	.selectbox {
		position: absolute;
		top: 160px;
		left: 230px;
		transform: translate(-50%, -50%);
		z-index: 999;
		box-sizing: border-box;
		display: flex;
	}

	.item {
		border-radius: 5px;
		background-color: rgba(0, 0, 0, .5);
		margin: 8px;
		padding: 8px 16px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
</style>